<!DOCTYPE html  PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

        <title>Pendu :: &Agrave; propos</title>
        <link rel="stylesheet" type="text/css" href="css/style.css" media="screen"/>
        <link rel="stylesheet" type="text/css" href="css/informations_print.css" media="print" />

        <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico" />
    </head>

    <body>

        <?php
        include ('struc_header.xhtml');
        include ('struc_nav.php');
        ?>

        <div id="content">
            <h1>&Agrave; propos</h1>
            <a href="javascript:window.print()" title="Version imprimable" id="print">Imprimer cette page</a>
            <p>Ce projet a été réalisé dans le cadre de l'Unité d'Enseignement Technologie du Web 1 du master IC²A spécialité WIC de l'UPMF en <a href="credits.php" title="Crédits">trinôme</a>. Il consiste en la réalisation en trinôme d'un jeu du pendu multilingue (français et anglais) en utilisant les technologies suivantes: HTML/CSS, PHP/MySQL, JavaScript, AJAX.
                Pour ce faire nous avons eu un délai de 3 mois.</p>

            <h2>Configuration du jeu</h2>

            <p>Afin d'utiliser le jeu, il faut crée un fichier config.php sous la racine du dossier de ce format entre balises php:
            </p>
            <div id="config">
                <code >

                    &lt;?php <br/>&nbsp;&nbsp;&nbsp;//acces bdd
                    <br/>&nbsp;&nbsp;&nbsp;//adresse de la base de données
                    <br/>&nbsp;&nbsp;&nbsp;$urlbdd = '&lt;&lt;URLDeMaBaseDeDonnées&gt;&gt;';

                    <br/>&nbsp;&nbsp;&nbsp;//login de la bdd
                    <br/>&nbsp;&nbsp;&nbsp;$loginbdd = '&lt;&lt;LoginDeMaBaseDeDonnées&gt;&gt;';

                    <br/>&nbsp;&nbsp;&nbsp;//mot de passe de la base de donnees
                    <br/>&nbsp;&nbsp;&nbsp;$pwdbdd = '&lt;&lt;MotDePasseDeMaBaseDeDonnées&gt;&gt;';

                    <br/>&nbsp;&nbsp;&nbsp;//nom de la base de données
                    <br/>&nbsp;&nbsp;&nbsp;$tablebdd = '&lt;&lt;NomDeMaBaseDeDonnées&gt;&gt;'; <br/>
                    ?&gt;

                </code>
            </div>
            <p>Le bon fonctionnement du jeu requiert une connexion internet pour aller chercher la police chargée à partir de <a href="http://www.google.com/webfonts/specimen/Mountains+of+Christmas" title="Google Webfonts">GoogleFont</a></p>

            <h3>Outils</h3>
            <p>
                Nous avons travaillé en groupe et coordonné nos efforts en utilisant un SVN (Subversion - Outil de versionnage des fichiers). Il est hébergé sur <a href="http://code.google.com/p/wic-hangman/" title="Site SVN">GoogleCode</a>. 
                <br/>Les sources sont exportable avec la commande :<br/> <code> svn checkout http://wic-hangman.googlecode.com/svn/trunk/ wic-hangman-read-only</code>
            </p>
            <p>La base de données est libre d'être définie par l'utilisateur mais elle doit être créée</p>
            <h2>Technologies utilis&eacute;es</h2>
            <p>
                Nous avons utilisé le langage PHP couplé à MySQL ainsi que XHTML lié à CSS et JavaScript (AJAX).
            </p>
            <h3>
                PHP
            </h3>
            <p>
                Le langage PHP a été utilisé du côté serveur afin d'effectuer un traitement sur les données.
            </p>
            <h3>
                MySQL
            </h3>
            <p>
                La base de données hébergée sur le serveur est de type MySQL. Elle permet de stocker les mots et d'effectuer plusieurs types de requêtes sur ces mêmes mots. Récupération, modification, suppression, ajout... Si la table n'existe pas elle est créée dans la base de données
            </p>
            <h3>
                XHTML Strict
            </h3>
            <p>
                Pendant ce projet, nous avons eu la contrainte d'afficher les pages du site en XHTML strict. Il est possible de le vérifier grâce au validateur W3C. Toutes nos pages ont été testée et sont conformes à ce format sauf la page de jeu qui, contenant du HTML5. Ce choix est conscient de notre part car nous voulions dessiner le pendu grâce à la librairie graphique de Javascript. Le dessin en Javascript est affiché grâce à la balise &lt;canvas&gt;. 
            </p>
            <p>
                Pour la mise en page du site, on a défini :
            </p>
            <ul>
                <li>
                    un entête
                </li>
                <li>
                    un menu
                </li>
                <li>
                    un footer
                </li>
            </ul>	
            <p>   Toutes ces entités sont appliquées systématiquement à toutes les pages, seul le contenu diff&egrave;re. Ainsi, on obtient un site avec une construction plus claire et optimisée.
            </p>
            <h3>
                CSS
            </h3>
            <p>
                Nous avons opt&eacute; pour un style "Noël" tant dans l'affichage que dans l'histoire de notre jeu. Lors de la fin de partie, allumez vos enceintes, une surprise (en HTML5) a été glissée dans le code.
            </p>
            <p>
                Cette page contient une feuille de style diff&eacute;rente si on passe en mode "print". Cela permet d'appliquer un style mieux adapt&eacute; au format d'impression.
            </p>
            <h3>
                Javascript
            </h3>
            <p>
                Le jeu est cod&eacute; en Javascript principalement. Toutes les balises sont cr&eacute;&eacute; &agrave; la volée et le jeu mis &agrave; jour gr&acirc;ce aux requ&ecirc;tes AJAX. Le pendu est dessin&eacute; en Javascript.
            </p>
            <p>La neige est issue d'un <a href="http://vic.drago.free.fr/neige.php" title="Script neige">script externe</a> </p>
            <h3>
                Ajax
            </h3>
            <p>
                Les requ&ecirc;tes AJAX sont effectu&eacute;es dans le jeu et dans la partie administration.
            </p>
            <p>Dans le jeu, nous avons recod&eacute; le proxy donn&eacute; afin de le faire correspondre &agrave; nos besoins. Lors du commencement, le jeu est initialis&eacute; via AJAX. Puis à chaque "coup" il y a un nouvel appel AJAX. Et ce jusqu'&agrave; la victoire ou la d&eacute;faite du joueur. En fin de partie le statut de la partie est récupéré et un nouvel &eacute;cran est affich&eacute;, et permet au joueur de recommencer s'il le souhaite.</p>
            <p>
                Dans la partie administration, la gestion des mots est faite en AJX aussi pour permettre à l'administrateur supprimer ou modifier un mot, son statut...
            </p>
            <h2>Partie administration</h2>
            <p>
                La partie administration qui permet la gestion des mots est accessible à la page <a href="admin.php" title="Page admin">"admin"</a> en s'identifiant avec le login "admin" et le mot de passe "administration". Nous avons préféré une gestion de membre par session plutôt que par htaccess car cette dernière aurait été beaucoup plus contraignante pour l'utilisateur et qu'en plus nous n'avons besoin que d'un admin.
                L'administrateur à la possibilité de se déconnecter à partir de la page admin.
            </p>
            <p>
                Toute la partie administration est gérée dynamiquement et sans rechargement de page (avec l'utilisation de <a href="http://jqueryui.com/demos/dialog" title="JQueryUI">JQueryUI dialog</a>). Ainsi la gestion est plus fluide et simplifiée.
            </p>
            <h2>Ergonomie</h2>
            <p>Suivant le thème de Noël nous avons essayé de respecter au mieux notre charte graphique afin de ne pas perdre l'utilisateur. Le site est très facilement accessible et la navigation est simple. Nous avons mis en relief la page active en changeant la couleur du lien actif. Le site propose un minimum de rechargement de page lors de la soumission de formulaire. La sémantique des balises a été respectée. La neige peut être désactivée à la main dans le fichier header.xhtml</p>
            <h2>Ouverture</h2>
            <p>Le projet est facilement extensible et pourrait contenir une gestion utilisateur et scores de parties. Des niveaux de difficulté (temps, nombre d'erreur maximum...) ne sont pas à exclure.</p>
            <span class="fauxbouton grosmot">Merci et Bonnes fêtes !</span>
        </div>
        <?php
        include ('struc_footer.php');
        ?>

    </body>
</html>